<template>
    <!-- 仅限一个根元素 -->
    <!-- 快捷生成基础代码: < 或者 vbase 前提需要安装插件 -->
  <div>
    <h1>你好 vue </h1>
    <div>名字:{{name}}</div>
    <div>地址:{{address}}</div>
    <button @click="num++">{{num}}</button>

    <!-- ------------------------------------------------ -->
    <!-- 图片的使用:用public目录下 -->
    <!-- /代表根路径  public是静态托管目录,要通过跟路径访问 -->
    <img src="/img/banner1.jpg" alt="">
    <!-- 完整的格式 -->
    <img src="http://localhost:8080/img/banner1.png" alt="">

    <!-- src/assets 目录，也可以存储静态文件；需要用相对路径调用 -->
    <img src="./assets/logo.png" alt="">

    <!-- 
      存放静态文件有两个目录： public 和 assets

      真正的大型项目，在交付时需要进行打包处理，留下主要代码
      -webpack工具：在扩展课程 6阶段中有

      -public：简单粗暴-所有放在此目录下的文件都会打包到最终项目文件夹里
      -assets：智能分辨-会自动识别项目中用到的文件 在打包带最终代码里

      假设文件夹有100张图:我的项目中使用了其中40张，另外60个没用上
      -放在public下：会都被保留下来
      -放在assets里：会保留40张用到的，其他60个会被删除
     -->

     <!-- 由于项目包默认会运行 App.vue 的代码 -->
     <!-- 所以:练习阶段,那个文件叫 App.vue 就会运行到那个文件 -->
  </div>
  <!--  -->
  <!-- <div></div> -->
</template>

<script>
// ES6的导出语法，导出到 main.js中，被放到 new Vue里了
// 在{}中书写的代码，就相当于是在 new({}) 中书写的
  export default {
    // ctrl + i : 查看所有选项
    // vdata
    // 脚手架项目包中，data必须是函数，返回一个数据对象
    // 原因与 复用有关 -- 以后详细说
    data() {
      return {
        num: 1,
        name:'蔡徐坤',
        address:'上海市普陀区'
      }
    },

  }
</script>

<style lang="scss" scoped>

</style>